<template>
    <div>
       <van-row class="cz-title">
            <van-col span="3">
                <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="18" class="text-align-c font-36">
                我的关注
            </van-col>
            <van-col span="3">
                <img class="fr icon_return" src="../../assets/image/index/icon_search.png" alt="" @click="secrchList()">
            </van-col>
        </van-row>
        <div class="tab-name-box">
            <div class="tab-box fl text-align-c font-28" v-for="(item,index) in tabName" :key="index">
                <span @click="active = index,tabIndex(index)" :class="[active == index ? 'active' : '']">{{item.name}}({{item.num}})</span>
            </div>
        </div>
        <ul class="clearfix focus-ul">
            <li class="clearfix" v-if="active == 0" v-for="(item,index) in gzlists" :key="index" @click="centerLink(item.object.id)">
                <img class="fl focusTx border-radius-50" :src="$imgPath(item.object.headImg)" alt="">
                <div class="clearfix focus-ul-div fl">
                    <span class="name-age">
                        <em class="fl color-3 font-3 margin-r">{{item.object.nickname}}</em>
                        <img class="fl nan-nv" v-if="item.object.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                        <img class="fl nan-nv" v-if="item.object.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                        <em class="fl color-9">{{item.object.age}}</em>
                        <em class="fr zai font-24" v-if="item.object.onlineStatus == 0">在线</em>
                        <em class="fr font-24 color-9" v-else>30分钟前</em>
                    </span>
                    <span class="name-game-icon">
                        <img v-for="(items,indexs) in item.objectServices" :key="indexs" :src="$imgPath(items.image)" alt="">
                    </span>
                    <span class="font-22 color-9" style="margin-top:.1rem;">
                        {{item.object.signature}}
                    </span>
                </div>
            </li>
            <li class="clearfix" v-if="active == 1" v-for="(item,index) in gzlists" :key="index" @click="centerLink(item.user.id)">
                <img class="fl focusTx border-radius-50" :src="$imgPath(item.user.headImg)" alt="">
                <div class="clearfix focus-ul-div fl">
                    <span class="name-age">
                        <em class="fl color-3 font-3 margin-r">{{item.user.nickname}}</em>
                        <img class="fl nan-nv" v-if="item.user.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                        <img class="fl nan-nv" v-if="item.user.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                        <em class="fl color-9">{{item.user.age}}</em>
                        <em class="fr zai font-24" v-if="item.user.onlineStatus == 0">在线</em>
                        <em class="fr font-24 color-9" v-else>30分钟前</em>
                    </span>
                    <span class="name-game-icon">
                        <img v-for="(items,indexs) in item.userServices" :key="indexs" :src="$imgPath(items.image)" alt="">
                    </span>
                    <span class="font-22 color-9" style="margin-top:.1rem;">
                        {{item.user.signature}}
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            active:this.$route.params.typeId,
            tabName:[
                {
                    name:'我的关注',
                    num:''
                },
                {
                    name:'我的粉丝',
                    num:''
                }
            ],
            focusId: this.$route.params.focusId,
            page:1,
            size:10,
            gzlists:[],
            gzlists1:[],
            gzlists2:[],
            num:[]
        }
    },
    mounted(){
        this.gzList()
        this.fsList()
    },
    methods:{
        // 关注列表
        gzList(){
            let params = {
                page:this.page - 1,
                size:this.size,
            }
            apiHttp.apiCenter.listByUser(params,resp=>{
                for(var i=0;i<resp.data.content.length;i++){
                    if(resp.data.content[i].headImg==null || resp.headImgresp.data.content[i].headImg==''){
                        resp.data.content[i].headImg = '/user/head/defaultHeadImage.png';
                    }
                    this.gzlists1.push( resp.data.content[i]);
                }
                this.tabName[0].num = resp.data.totalElements
                if(this.active == 0){
                    this.gzlists = this.gzlists1
                }
            })
        },
        // 粉丝列表
        fsList(){
            let params = {
                page:this.page - 1,
                size:this.size,
            }
            apiHttp.apiCenter.listByObjectUser(params,resp=>{
                for(var i=0;i<resp.data.content.length;i++){
                    if(resp.data.content[i].headImg==null || resp.headImgresp.data.content[i].headImg==''){
                        resp.data.content[i].headImg = '/user/head/defaultHeadImage.png';
                    }
                    this.gzlists2.push( resp.data.content[i]);
                }
                this.tabName[1].num = resp.data.totalElements
                if(this.active == 1){
                    this.gzlists = this.gzlists2
                }
            })
        },
        tabIndex(){
            if(this.active == 0){
                this.gzlists = this.gzlists1
            }else{
                this.gzlists = this.gzlists2
            }
        },
        centerLink(id){
            this.$router.push({
                name:'center',
                query:{
                    userId:id
                }
            })
        },
        secrchList(){
            this.$router.push({
                name:'search',
                query:{
                    socrt:'focus',
                    type:this.active
                }
            })
        }
    }
}
</script>
<style scoped>
.margin-r{
    margin-right: 0.2rem;
}
.cz-title{
    height: 1.36rem;
    line-height: 1.36rem;
    padding: .4rem .6rem;
    width: calc(100% - 1.2rem);
    overflow: hidden;
}
.icon_return{
    width: .9rem;
    margin-top: .28rem;
}
.tab-name-box{
    height: 2rem;
    width: 100%;
    background-color: #F6F6F6;
    overflow: hidden;
}
.tab-box{
    width: 50%;
    height: 2rem;
}
.tab-box span{
    line-height: 2.2rem;
    height: 1.9rem;
    padding: 0 .5rem;
    display: inline-block;
    border-bottom: transparent .06rem solid;
}
.active{
    border-bottom: #D84E4D .06rem solid !important;
    color: #D84E4D !important;
}
.focus-ul{
    padding: 0 .6rem;
}
.focus-ul li{
    padding: .6rem 0;
}
.focus-ul-div{
    width: calc(100% - 2.8rem);
    padding-left: .4rem;
}
.focusTx{
    width: 2.4rem;
    height: 2.4rem;
}
.focus-ul-div span{
    display: block;
    height: .8rem;
    line-height: .8rem;
}
.name-age{
    height: .8rem;
    line-height: .8rem;
}
.nan-nv{
    margin: .1rem;
    width: .5rem;
    margin-right: .1rem;
}
.name-game-icon{
    margin-top: 0.2rem;
    height: .8rem;
}
.name-game-icon img{
    width: .7rem;
    margin-right: 0.14rem;
}
.zai{
    color: #D84E4D;
}
.van-ellipsis{
    font-size: .6rem;
}
</style>

